<template>
	<view class="main">
		<view class="top"></view>
		<!-- 个人信息-start -->
		<view class="userCard">
			<view class="left">
				<image class="left-img" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
				<image class="left-img" v-if="!userInfo.avatar"></image>
				<view class="left-name" v-if="isLogin">
					<view>{{userInfo.nickName}}</view>
					<span class="left-tag" v-if="userInfo.roles.length" v-for="item in userInfo.roles">{{item.roleName}}</span>
				</view>
				<view class="left-name" v-if="!isLogin" @click="toLogin">
					<view>登录/注册</view>
				</view>
			</view>
			<view class="right" @click="toPage('/pagesMain/mine/userInfo')" v-if="isLogin">
				个人信息
			</view>
		</view>
		<!-- 个人信息-end -->

		<view class="order">
			<view class="order-name">
				<span>我的订单</span>
				<view class="order-more" @click="toPage('/pagesMain/mine/order/index')">
					<span>查看全部</span>
					<u-icon style="margin-left: 6upx;" name="arrow-right" color="#d7d7d7" size="10"></u-icon>
				</view>
			</view>
			<view class="order-list">
				<view class="order-item">
					<view class="order-num">0</view>
					<view>成交订单</view>
				</view>
				<view class="order-item">
					<view class="order-num">0</view>
					<view>待审核</view>
				</view>
				<view class="order-item">
					<view class="order-num">0</view>
					<view>进行中</view>
				</view>
				<view class="order-item">
					<view class="order-num">0</view>
					<view>作废</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="item" @click="toPage('/pagesMain/mine/shiming/index')">
				<view class="item-left">
					<image class="item-img" src="@/static/mine/icon-shiming.png"></image>
					<span>实名认证</span>
				</view>
				<view class="item-right">
					<span :style="'color:'+getColor(userInfo.state)">{{stateName[userInfo.state]}}</span>
					<u-icon name="arrow-right" color="#d7d7d7" size="14"></u-icon>
				</view>
			</view>
			<view class="item" @click="toPage('/pagesMain/mine/kefu')">
				<view class="item-left">
					<image class="item-img" src="@/static/mine/icon-kefu.png"></image>
					<span>联系客服</span>
				</view>
				<u-icon name="arrow-right" color="#d7d7d7" size="14"></u-icon>
			</view>
		</view>


	</view>
</template>


<script>
	import db from '@/common/localstorage.js'
	export default {
		data() {
			return {
				isLogin:false,
				userInfo: {},
				// 0-待认证  1-认证中  2-认证通过  3-认证失败
				stateName: {
					0: '待认证',
					1: '认证中',
					2: '认证通过',
					3: '认证失败',
				}
			}
		},
		onLoad() {
			this.getInfo()
		},

		methods: {
			toLogin(){
				uni.navigateTo({
				  url: '/pages/login/index'
				})
			},
			toPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			getInfo() {
				this.$postjsonNot('/api/user/getInfo', {}).then(res => {
					if(res.data.code == 200){
						this.isLogin = true
						let data = res.data.data
						this.userInfo = data
						 db.save('userInfo', data)
						 db.save('permissions', data.permissions)
						 db.save('roles', data.roles)
					}
					
				})
			},
			getColor(state) {
				// "state": 1, //判断用户审核状态   0-待认证  1-认证中  2-认证通过  3-认证失败
				switch (state) {
					case 0:
						return "#999999"
						break;
					case 1:
						return "#FE9406"
						break;
					case 2:
						return "#11AA66"
						break;
					case 3:
						return "#F01022"
						break;
					default:
						return "#999999"
						break;
				}
			}
		},


	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.top {
		width: 100%;
		height: 344rpx;
		background: linear-gradient(-180deg, #C6FFE6 0%, rgba(195, 255, 207, 0) 100%);
	}

	.content {
		width: calc(100% - 24upx - 60upx);


	}

	.userCard {
		margin: -344upx auto 0 auto;
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
		width: calc(100% - 60upx);
		padding-top: 30upx;
		z-index: 3;
		position: relative;
		align-items: center;

		.right {
			position: relative;
			width: 136rpx;
			height: 56rpx;
			border-radius: 27rpx;
			border: 1rpx solid #111111;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #111111;
			line-height: 56rpx;
			text-align: center
		}

		.left {
			display: flex;
			align-items: center;

			.left-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				background: #CEDFFF;
				margin-right: 20upx;
			}

			.left-name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				// margin-top: 30upx;
			}

			.left-tag {
				border-radius: 6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #11AA66;
				background: #C4EFDC;
				padding: 6upx 16upx;
				margin-right: 10upx;
				margin-top: 20upx;
			}
		}
	}

	.order {
		width: calc(100% - 48upx - 50upx);
		// height: 242rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 40upx;
		margin-left: 24upx;
		margin-right: 24upx;
		margin-bottom: 20upx;
		padding: 40upx 20upx 40upx 30upx;

		.order-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #111111;
			margin-bottom: 40upx;
		}

		.order-more {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
		}

		.order-list {
			display: flex;
			justify-content: space-around;

			.order-item {
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				text-align: center;

				.order-num {
					font-family: Roboto, Roboto;
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					margin-bottom: 20upx;
					text-align: center;
				}
			}
		}
	}

	.list {
		width: calc(100% - 48upx);
		margin-left: 24upx;
		margin-right: 24upx;
		border-radius: 10rpx;
		background: #FFFFFF;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #111111;
			padding: 40upx 0;
			width: calc(100% - 40upx);
			margin: 0 20upx;
			border-bottom: solid 1upx rgba(228, 228, 228, 1);
		}

		.item-left {
			display: flex;
			align-items: center;
		}

		.item-right {
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;

			span {
				margin-right: 10upx;
			}
		}

		.item-img {
			width: 44upx;
			height: 44upx;
			margin-right: 10upx;
		}

		.item:last-child {
			border-bottom: none;
		}
	}
</style>